import React from 'react';
import "../css/home.css";
import Fazhan from "./Fazhan";
import Lianxi from "./Lianxi";
import Guanli from "./Guanli";
import Jianjie from "./Jianjie";
import News from "./News";

import {
   HashRouter,
   Switch,
   Route,
   Link
} from "react-router-dom";

class Home extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return(
            <HashRouter>
            <div>
                <h4>home</h4>
                <header>
                 <ul>
                     <li>小米商城</li>
                     <li>MIUI</li>
                     <li>LOT</li>
                     <li>云服务</li>
                     <li>天星舒克</li>
                     <li>有品</li>
                     <li>
                         <button onClick={()=>{
                             this.props.history.push({
                                 pathname:"/about",
                                 state:{
                                     message:"登录..."
                                 }
                             })
                         }}>登录</button>
                    </li>
                     <li>注册</li>
                 </ul>
              </header>
              <div className="navigation_bar_container">
                 
                  <div><Link to="/Guanli">管理团队</Link></div>
                  <div><Link to="/Jianjie">公司简介</Link></div>
                  <div><Link to="/Lianxi">联系我们</Link></div>
                  <div><Link to="/News">小米新闻</Link></div>
                   <div><Link to="/">发展经历</Link></div>
              </div>
              {/* 嵌套路由对应的组件要渲染在哪里，嵌套路由就写在哪里 */}
              <div>
                  <Switch>
                <Route path="/Fazhan" component={Fazhan}/>
                <Route path="/Guanli" component={Guanli}/>
                <Route path="/Jianjie" component={Jianjie}/>
                <Route path="/Lianxi" component={Lianxi}/>
                <Route path="/News" component={News}/>
                </Switch>
              </div>
            </div>
            </HashRouter>
        );
    }
}

export default Home;